// 封装商品列表的业务逻辑代码
import { getSubCategoryAPI } from '@/apis/category'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
export function useGoods() {
  // 获取基础列表数据
  const route = useRoute()
  // 商品列表
  const goodList = ref([])
  // 请求参数对象
  const reqData = ref({
    categoryId: route.params.id,
    page: 1,
    pageSize: 20,
    sortField: 'publishTime'
  })
  // 请求商品数据方法
  const getGoodList = async () => {
    const res = await getSubCategoryAPI(reqData.value)
    goodList.value = res.result.items
  }

  onMounted(() => getGoodList())

  // tab 切换
  const tabChange = () => {
    reqData.value.page = 1
    getGoodList()
  }

  // 列表无限加载
  // 停止监听滚动
  const disabled = ref(false)
  // 无限滚动指令v-infinite-scroll绑定的方法
  const load = async () => {
    // 获取下一页数据
    reqData.value.page++
    const res = await getSubCategoryAPI(reqData.value)
    goodList.value = [...goodList.value, ...res.result.items]
    // 加载完毕，停止监听
    if (res.result.items.length === 0) {
      disabled.value = true
    }
  }

  return {
    goodList,
    reqData,
    tabChange,
    load,
    disabled
  }
}
